import { useState } from 'react'
import { Steps, Table, Button, Divider } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import './DetailXundan.scss';
import { useNavigate } from 'react-router-dom';

const { Step } = Steps;
const { Column } = Table;

const DetailXundan = () => {
  // 步骤条当前状态
  const [currentStep] = useState(1); // 0: 创建询价单, 1: 询价单审核, 2: 询价单报价

  // 货物数据
  const goodsData = [
    {
      name: '白糖',
      spec: '1x0.8',
      package: '袋',
      quantity: 5,
      weight: 50,
      volume: 6
    },
    {
      name: '调味品',
      spec: '1x0.5',
      package: '袋',
      quantity: 3,
      weight: 30,
      volume: 30
    }
  ];

  // 计算合计
  const totals = goodsData.reduce((acc, curr) => ({
    quantity: acc.quantity + curr.quantity,
    weight: acc.weight + curr.weight,
    volume: acc.volume + curr.volume
  }), { quantity: 0, weight: 0, volume: 0 });
  const navigate=useNavigate()
  return (
    <div className="order-container">
      {/* 头部 */}
      <header className="order-header">
        <h1>订单号 XL1589965488965</h1>
      </header>

      {/* 步骤条 */}
      <div className="steps-card">
        <Steps current={currentStep}>
          <Step title="创建询价单" description="2024/09/24 09:10" />
          <Step title="询价单审核" />
          <Step title="询价单报价" />
        </Steps>
      </div>

      {/* 运输地址 */}
      <div className="address-card">
        <h2 className="section-title">运输地址</h2>
        <div className="address-grid">
          <div className="address-item">
            <label>始发地</label>
            <div>南宁市</div>
            <div className="detail">南宁青秀山11号仓库</div>
          </div>
          <div className="address-item">
            <label>目的地</label>
            <div>深圳市</div>
            <div className="detail">南山区凤凰山山15号仓库</div>
          </div>
        </div>
      </div>

      {/* 计划时间 */}
      <div className="time-card">
        <h2 className="section-title">计划时间</h2>
        <div className="time-grid">
          <div className="time-item">
            <label>计划装货时间</label>

            <div>2024/09/24 09:10</div>
          </div>
          <div className="time-item">
            <label>计划到货时间</label>

            <div>2024/09/24 09:10</div>
          </div>
        </div>
      </div>

      {/* 货物信息 */}
      <div className="goods-card">
        <h2 className="section-title">货物信息</h2>
        <Table
          bordered
          dataSource={goodsData}
          pagination={false}
          summary={() => (
            <Table.Summary.Row>
              <Table.Summary.Cell index={0} />
              <Table.Summary.Cell align="center" index={1} >合计</Table.Summary.Cell>
              <Table.Summary.Cell index={2} />
              <Table.Summary.Cell align="center" index={3}>{totals.quantity}</Table.Summary.Cell>
              <Table.Summary.Cell align="center" index={4}>{totals.weight}</Table.Summary.Cell>
              <Table.Summary.Cell align="center" index={5}>{totals.volume}</Table.Summary.Cell>
            </Table.Summary.Row>
          )}
        >
          <Column align="center" title="*货名" dataIndex="name" key="name" />
          <Column align="center" title="规格型号" dataIndex="spec" key="spec" />
          <Column align="center" title="*总包装" dataIndex="package" key="package" />
          <Column align="center" title="*总数量" dataIndex="quantity" key="quantity" />
          <Column align="center" title="*总重量kg" dataIndex="weight" key="weight" />
          <Column align="center" title="总体积 m³" dataIndex="volume" key="volume" />
        </Table>
      </div>

      {/* 备注 */}
      <div className="remark-card">
        <h2 className="section-title">备注</h2>
        <div className="remark-content">车厢要干燥，防水</div>
      </div>

      {/* 返回按钮 */}
      <Button
        type="default"
        className="back-button"
        onClick={()=>{navigate('/admin/xundanjia')}}
      >
        返回
      </Button>
    </div>
  );
};

export default DetailXundan;